import React, { useState, useEffect } from 'react';
import Taro from '@tarojs/taro';
import {View, Image, Navigator, Text} from '@tarojs/components';
import {IndexDiyModule, IndexDiyModuleLimit} from 'src/utils/server.interface';
import {AtIcon, AtProgress} from 'taro-ui';
import CountDown from '../../components/count-down/count-down';
import CountDown1 from '../../components/count-down/count-down-1';
import {gotoPage} from '../../utils/tools';
import {RESOURCE_URL} from "../../constants/api";
import Float from '../../components/float/float';
import './index-sale-limit-3.scss';

const defaultProps: IndexDiyModule = {
  name: '',
  moreUrl: '',
  data: [],
  type: ''
}

const IndexSaleLimit3: React.FC<IndexDiyModule<IndexDiyModuleLimit[]>> = (props) => {
  const [firstGood, setFirstGood] = useState<IndexDiyModuleLimit>({
    id: 0,
    name: '',
    url: '',
    price: 0,
    market_price: 0,
    beginTime: 0,
    endTime: 0,
    nowTime: 0,
    img: '',
    status: 0,
    progress: 0,
  })
  const [goods, setGoods] = useState<IndexDiyModuleLimit[]>([])
  useEffect(() => {
    const firstGood = props.data.slice(0, 1)[0]
    if (firstGood) {
      if (firstGood.status === 0) {
        firstGood['status'] = -1;
      } else {
        if (firstGood.nowTime < firstGood.beginTime) {
          firstGood['status'] = 0
        } else if (firstGood.nowTime < firstGood.endTime) {
          firstGood['status'] = 1
        } else {
          firstGood['status'] = 99
        }
      }
      const goods = props.data.slice(1)
      goods.forEach(item => {
        if (item.status === 0) {
          item['status'] = -1;
        } else {
          if (item.nowTime < item.beginTime) {
            item['status'] = 0
          } else if (item.nowTime < item.endTime) {
            item['status'] = 1
          } else {
            item['status'] = 99
          }
        }
      });
      setFirstGood(firstGood)
      setGoods(goods)
    }
  }, [props.data])

  return (
    <View className='quickRoot index-sale-box'>
      <View className='title-box'>
        <View className='title'>
          <Image src={RESOURCE_URL + "/resources/weapp/images/quick.svg"} className='img' mode='scaleToFill' />
        </View>
        {!!props.moreUrl && <View onClick={() => {
          gotoPage(props.moreUrl)
        }} hoverClass='none'
        >
          <View className='more-box'>
            <Text>更多精彩</Text>
            <AtIcon value='chevron-right' size='16' />
          </View>
        </View>}
      </View>
      <View className='content'>
        <View className='cover-box' onClick={()=>{Taro.navigateTo({url: firstGood.url})}}>
          <View className='cover'>
            <Image mode='aspectFill' src={firstGood.main_img || firstGood.img} style='display:Block;width:100%;height:100%;' />
            <View className='label'>TOP<Text decode>&nbsp;1</Text></View>
          </View>
          <View className='info'>
            <View className='title'>{firstGood.name}</View>
            {firstGood.status === 1 && <View className='time-box'>
              <View className='process'>
                <AtProgress stroke-width='15rpx' percent={firstGood.progress}
                  customStyle='display:block;' color='#db6457'
                />
              </View>
              <View className='timer'>
                <CountDown time={firstGood.endTime} />
              </View>
            </View>}
            {firstGood.status === 0 && <View className='time-box'
              style='justify-content: center;'
            >
              <View className='process' style='width:auto; color:#dc1b06;'>
                距开始还有：
              </View>
              <View className='timer'>
                <CountDown time={firstGood.beginTime} />
              </View>
            </View>}
            {firstGood.status === 99 && <View className='time-box' style='justify-content: center;'>
              <View className='process' style='width:auto; color:#dc1b06;'>
                已经结束了
              </View>
            </View>}
          </View>
        </View>
        {goods.length > 0 && goods.map((ce, i) => <View key={ce.id} className='item'
          onClick={()=>{Taro.navigateTo({url: ce.url})}}
        >
          <View className='image'>
            <Image src={ce.main_img || ce.img} mode='aspectFill' className='img' />
            <View className={`label ${i === 0 ? 'secondary' : ''}${i >= 0 ? 'third' : ''}`}>TOP<Text
              decode
            >&nbsp;{i + 2}</Text></View>
          </View>
          {!!ce.is_free_visit && (process.env.P_ENV === 'vc' || process.env.P_ENV === 'kunxin') ?
            <View className='item-right'>
              <View className='item-title'>{ce.name}</View>
            </View> : <View className='item-right'>
              <View className='item-title'>{ce.name}</View>
              <View className='info-box'>
                <View className='info-left'>
                  {ce.status === 1 &&
                  <AtProgress percent={ce.progress} color='#ec5a50' stroke-width='16rpx' />}
                  {!!ce.price && <View className='price-box'>
                    <View>
                      <Text className='symbol'>¥</Text>
                      <View className='price inline'>
                        <Float value={ce.price} />
                      </View>
                    </View>
                  </View>
                  }
                </View>
                {ce.status >= 0 && ce.status < 99 && <View className='buy'>抢购</View>}
                {ce.status === -1 && <View className='buy' style='background:#a9a9a9;'>售罄</View>}
              </View>
              {ce.status === 99 && <View className='time-info'>您来晚了，商品已被抢光～</View>}
              {ce.status === 1 && <View className='time-info'><CountDown1 type='end' time={ce.endTime} /></View>}
              {ce.status === 0 && <View className='time-info'><CountDown1 type='start' time={ce.beginTime} /></View>}
            </View>
          }
        </View>)}
      </View>
    </View>
  )
}

IndexSaleLimit3.defaultProps = defaultProps

export default IndexSaleLimit3
